<template>
  <ProfileLayout :breadcrumbs="['个人中心', '收货地址']">
    <div class="bg-white rounded-2xl p-8 shadow-sm">
      <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-light text-gray-900">收货地址</h2>
        <button
          @click="showAddressForm = true"
          class="px-4 py-2 bg-gray-900 text-white rounded-xl text-sm font-medium hover:bg-gray-800 transition-colors"
        >
          添加地址
        </button>
      </div>
      
      <div v-if="addresses.length === 0" class="text-center py-12">
        <p class="text-gray-500">暂无收货地址</p>
        <button
          @click="showAddressForm = true"
          class="mt-4 px-6 py-3 bg-gray-900 text-white rounded-2xl font-medium hover:bg-gray-800 transition-colors"
        >
          添加地址
        </button>
      </div>

      <div v-else class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div
          v-for="address in addresses"
          :key="address.id"
          class="border border-gray-200 rounded-2xl p-6 hover:shadow-md transition-shadow"
        >
          <div class="flex justify-between items-start mb-4">
            <div class="flex-1">
              <div class="flex items-center gap-2 mb-2">
                <h4 class="text-lg font-medium text-gray-900">{{ address.name }}</h4>
                <span v-if="address.is_default" class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-900 text-white">
                  默认
                </span>
              </div>
              <p class="text-gray-600 mb-1">{{ address.phone }}</p>
              <p class="text-gray-600">{{ formatAddress(address) }}</p>
            </div>
            <div class="flex items-center gap-3 ml-4">
              <button
                @click="editAddress(address)"
                class="text-sm text-gray-600 hover:text-gray-900 transition-colors whitespace-nowrap"
              >
                编辑
              </button>
              <span class="text-gray-300">|</span>
              <button
                @click="deleteAddress(address.id)"
                class="text-sm text-red-600 hover:text-red-800 transition-colors whitespace-nowrap"
              >
                删除
              </button>
            </div>
          </div>
          
          <button
            v-if="!address.is_default"
            @click="setDefaultAddress(address.id)"
            class="text-sm text-gray-600 hover:text-gray-900 underline"
          >
            设为默认地址
          </button>
        </div>
      </div>
    </div>

    <!-- Address Form Modal -->
    <div v-if="showAddressForm" class="fixed inset-0 bg-black bg-opacity-50 overflow-y-auto h-full w-full z-50">
      <div class="relative top-20 mx-auto p-6 border w-full max-w-md shadow-2xl rounded-2xl bg-white">
        <div class="mb-6">
          <h3 class="text-xl font-medium text-gray-900">{{ editingAddress ? '编辑地址' : '添加收货地址' }}</h3>
        </div>
        
        <form @submit.prevent="saveAddress" class="space-y-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">收货人</label>
            <input
              v-model="addressForm.name"
              type="text"
              required
              class="w-full px-4 py-3 border border-gray-300 rounded-2xl shadow-sm focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
            />
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">手机号</label>
            <input
              v-model="addressForm.phone"
              type="tel"
              required
              class="w-full px-4 py-3 border border-gray-300 rounded-2xl shadow-sm focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
            />
          </div>
          
          <div class="grid grid-cols-3 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">省份</label>
              <input
                v-model="addressForm.province"
                type="text"
                required
                class="w-full px-4 py-3 border border-gray-300 rounded-2xl shadow-sm focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">城市</label>
              <input
                v-model="addressForm.city"
                type="text"
                required
                class="w-full px-4 py-3 border border-gray-300 rounded-2xl shadow-sm focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">区县</label>
              <input
                v-model="addressForm.district"
                type="text"
                required
                class="w-full px-4 py-3 border border-gray-300 rounded-2xl shadow-sm focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
              />
            </div>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">详细地址</label>
            <textarea
              v-model="addressForm.address"
              rows="3"
              required
              class="w-full px-4 py-3 border border-gray-300 rounded-2xl shadow-sm focus:ring-2 focus:ring-gray-900 focus:border-gray-900 resize-none"
            ></textarea>
          </div>
          
          <div class="flex items-center">
            <input
              v-model="addressForm.is_default"
              type="checkbox"
              class="h-4 w-4 text-gray-900 focus:ring-gray-900 border-gray-300 rounded"
            />
            <label class="ml-3 block text-sm text-gray-700">设为默认地址</label>
          </div>
          
          <div class="flex justify-end gap-3">
            <button
              type="button"
              @click="closeAddressForm"
              class="px-6 py-3 text-gray-700 bg-gray-100 rounded-2xl hover:bg-gray-200 transition-colors"
            >
              取消
            </button>
            <button
              type="submit"
              class="px-6 py-3 bg-gray-900 text-white rounded-2xl hover:bg-gray-800 transition-colors"
            >
              保存
            </button>
          </div>
        </form>
      </div>
    </div>
  </ProfileLayout>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { router } from '@inertiajs/vue3'
import ProfileLayout from '@/Layouts/ProfileLayout.vue'

// Props
const props = defineProps({
  addresses: {
    type: Array,
    default: () => []
  }
})

// 状态
const showAddressForm = ref(false)
const editingAddress = ref(null)

// 地址表单
const addressForm = reactive({
  name: '',
  phone: '',
  province: '',
  city: '',
  district: '',
  address: '',
  is_default: false
})

// 格式化地址
const formatAddress = (address) => {
  return `${address.province}${address.city}${address.district}${address.address}`
}

// 编辑地址
const editAddress = (address) => {
  editingAddress.value = address
  Object.assign(addressForm, {
    name: address.name,
    phone: address.phone,
    province: address.province,
    city: address.city,
    district: address.district,
    address: address.address,
    is_default: address.is_default
  })
  showAddressForm.value = true
}

// 保存地址
const saveAddress = () => {
  if (editingAddress.value) {
    // 编辑地址
    router.put(route('addresses.update', editingAddress.value.id), addressForm, {
      preserveScroll: true,
      onSuccess: () => {
        closeAddressForm()
      }
    })
  } else {
    // 添加新地址
    router.post(route('addresses.store'), addressForm, {
      preserveScroll: true,
      onSuccess: () => {
        closeAddressForm()
      }
    })
  }
}

// 删除地址
const deleteAddress = (addressId) => {
  if (confirm('确定要删除这个地址吗？')) {
    router.delete(route('addresses.destroy', addressId), {
      preserveScroll: true
    })
  }
}

// 设置默认地址
const setDefaultAddress = (addressId) => {
  router.post(route('addresses.default', addressId), {}, {
    preserveScroll: true
  })
}

// 关闭地址表单
const closeAddressForm = () => {
  showAddressForm.value = false
  editingAddress.value = null
  Object.assign(addressForm, {
    name: '',
    phone: '',
    province: '',
    city: '',
    district: '',
    address: '',
    is_default: false
  })
}
</script>

